<script setup lang="ts">
  import { ref } from 'vue'
  import { vElementVisibility } from '@vueuse/components'
  import { VisibilityPropsType } from './types'

  defineOptions({
    name: 'SVisibility'
  })

  const props = withDefaults(defineProps<VisibilityPropsType>(), {
    once: false,
    showHandler: () => {},
    hideHandler: () => {}
  })

  const visibilityState = ref<boolean>(false)
  const onElementVisibility = (state: boolean) => {
    visibilityState.value = state
    if (state) props.showHandler()
    else props.hideHandler()
  }
</script>

<template>
  <div
    v-element-visibility="[onElementVisibility, { once, scrollTarget, rootMargin }]"
    class="s-visibility"
  >
    <slot :state="visibilityState" />
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
